<template>
	<div class="orderList personnelList">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-yibiaopan fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>数据快报</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 新的数据展示 -->
		<el-row :gutter="15" class="Module1">
			<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
				<div class="grid-content box-shadow">
					<h4 title="累计用户数">累计用户数</h4>
					<h3>
						<span style="color: black;">{{ topdata.total_user | ParseIntNum }}</span>
					</h3>
				</div>
			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
				<div class="grid-content box-shadow">
					<h4 title="累计店铺数量">累计店铺数量</h4>
					<h3>
						<span>{{ topdata.total_shop | ParseIntNum }}</span>
					</h3>
				</div>
			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
				<div class="grid-content box-shadow">
					<h4 title="累计时长（H)">累计时长（H)</h4>
					<h3>
						<span style="color: black;">{{ topdata.total_hour | filterNumber }}</span>
					</h3>
				</div>
			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
				<div class="grid-content box-shadow">
					<h4 title="累计人次">累计人次</h4>
					<h3>
						<span>{{ topdata.total_task | ParseIntNum }}</span>
					</h3>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="15" class="Module2">
			<!-- 近7天月度时长 -->
			<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
				<div class="Module3-box mt_20 box-shadow">
					<div class="card-header card-header-two">
						<h4>月度时长</h4>
					</div>
					<div class="Module3-box-twoBox">
						<div class="Module3-two-content">
							<template>
								<three :dayThree="daythrees"></three>
							</template>
						</div>
					</div>
				</div>
			</el-col>
			<!-- 近7天月度人次 -->
			<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
				<div class="Module3-box mt_20 box-shadow">
					<div class="card-header card-header-three">
						<h4>月度人次</h4>
					</div>
					<div class="Module3-box-threeBox">
						<div class="Module3-three-content">
							<template>
								<four :dayFours="dayFour"></four>
							</template>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="15" class="Module3">
			<!-- 近7天累计用户数 -->
			<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
				<div class="box-shadow mt_20" style="background-color: #ffffff; height: 395px; border-radius: 5px;">
					<div class="card-header m2-report">
						<h4>累计时长</h4>
					</div>
					<div style="padding: 20px 25px 0 25px; overflow: auto;">
						<template>
							<one :dayOne="dayones"></one>
						</template>
					</div>
				</div>
			</el-col>
			<!-- 近7天累计店铺数 -->
			<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
				<div class="box-shadow mt_20" style="background-color: #ffffff; height: 395px; border-radius: 5px;">
					<div class="card-header m2-report">
						<h4>累计人次</h4>
					</div>
					<div style="padding: 20px 25px 0 25px; overflow: auto;">
						<template>
							<onenext :dayOneNext="dayonesnext"></onenext>
						</template>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import one from './components/echarts/One.vue'
import onenext from './components/echarts/Onenext.vue'
import two from './components/echarts/Two.vue'
import three from './components/echarts/Three.vue'
import four from './components/echarts/Four.vue'
var common = require('../../static/tool.js')
import { fetchExpressList } from '@/api/express.js'

export default {
	name: 'orderList',
	data() {
		return {
			url: common.url,
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			now_time: '',
			topdata: [],
			nextdata: [],
			dayones: '7', //第一个
			dayonesnext: '7', //第一个next
			daytwos: '7', //第二个
			daythrees: '7', //第三个
			dayFour: '7' //第四个
		}
	},
	components: { one, onenext, two, three, four },
	created() {
		// this.getNow(0)
		// 数据快报-顶部今日和昨日的数据
		// this.getDate()
		this.getDateV2()
	},
	mounted() {
		// this.startResult()
	},
	methods: {
		startResult() {
			let m2One = parseInt($('.m2-report').offset().top)
			let m3One = parseInt($('.card-header-one').offset().top)
			let m3Two = parseInt($('.card-header-two').offset().top)
			let m3Three = parseInt($('.card-header-three').offset().top)
			if (m2One < this.windowSizeHeight - 200) {
				$('.m2-report').addClass('animated fadeInUp')
			}
			if (m3One < this.windowSizeHeight - 200) {
				$('.card-header-one').addClass('animated fadeInUp')
			}
			if (m3Two < this.windowSizeHeight - 200) {
				$('.card-header-two').addClass('animated fadeInUp')
			}
			if (m3Three < this.windowSizeHeight - 200) {
				$('.card-header-three').addClass('animated fadeInUp')
			}
			$(window).scroll(() => {
				let yheight1 = window.pageYOffset //滚动条距顶端的距离
				let pageTop = parseInt(yheight1) + parseInt(this.windowSizeHeight)
				// console.log(pageTop);
				// console.log(m2One);
				if (pageTop > m2One + 200) {
					$('.m2-report').addClass('animated fadeInUp')
				}
				if (pageTop > m3One + 200) {
					$('.card-header-one').addClass('animated fadeInUp')
				}
				if (pageTop > m3Two + 200) {
					$('.card-header-two').addClass('animated fadeInUp')
				}
				if (pageTop > m3Three + 200) {
					$('.card-header-three').addClass('animated fadeInUp')
				}
			})
		},
		handleCommandone(command) {
			// 向子组件传值
			this.dayones = command
		},
		handleCommandonenext(command) {
			// 向子组件传值
			this.dayonesnext = command
		},
		handleCommandtwo(command) {
			// 向子组件传值
			this.daytwos = command
		},
		handleCommandthree(command) {
			// 向子组件传值
			this.daythrees = command
		},
		handleCommandfour(command) {
			// 向子组件传值
			this.dayFour = command
		},
		getNow(e) {
			this.now_time = this.$moment().add('days', e).format('YYYY-MM-DD HH:mm:ss')
			//echarts渲染
		},
		getDate() {
			let fn = new FormData()
			fn.append('today', this.$moment().add('days', 0).format('YYYY-MM-DD'))
			this.$http.post(this.url + '/index/expressList', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.topdata = res.data.data
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)

			// 数据快报-顶部-第二天
			let fn_next = new FormData()
			fn_next.append('today', this.$moment().add('days', 1).format('YYYY-MM-DD'))
			this.$http.post(this.url + '/index/expressList', fn_next).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.nextdata = res.data.data
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		async getDateV2() {
			try {
				let ret = await fetchExpressList()
				this.topdata = ret
			} catch (err) {}
		}
	}
}
</script>

<style scoped>
/* .orderList {
		padding: 10px;
	} */
.el-col {
	border-radius: 5px;
}

.grid-content {
	border-radius: 5px;
	height: 127px;
	margin-top: 15px;
	padding: 15px 15px 0 15px;
	background: #ffffff;
}

.grid-content h4,
.grid-content h3 {
	text-align: center;
}

.grid-content h4 {
	height: 50px;
	line-height: 50px;
	font-weight: normal;
	color: rgb(153, 153, 153);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.grid-content h3 {
	height: 50px;
	line-height: 50px;
}

.grid-content h3 span {
	color: red;
	font-size: 27px;
}

.orderBox div {
	width: 50%;
	height: 95px;
}

.orderRightBox {
	text-align: right;
}

.orderRightBox p {
	font-size: 18px;
	line-height: 35px;
	font-weight: bold;
	color: #6c757d;
}

.card-header {
	border-bottom: 1px solid #f9f9f9;
	line-height: 30px;
	-ms-grid-row-align: center;
	align-self: center;
	padding: 10px 25px;
	display: flex;
	align-items: center;
}

.card-header h4 {
	font-size: 17px;
	line-height: 28px;
	padding-right: 10px;
	margin-bottom: 0;
	color: #212529;
	flex: 1;
}

.rechargeMoney {
	height: 160px;
	background-color: #cccccc;
	border-radius: 5px;
	padding: 15px;
	color: #ffffff;
	background-image: linear-gradient(to right, #4f55c9, #888bdc);
}

.orderSum {
	height: 160px;
	background-color: green;
	margin-top: 15px;
	border-radius: 5px;
	padding: 15px;
	color: #ffffff;
	background-image: linear-gradient(to right, #2e9aed, #498ec1);
}

.flex-container-baobiao {
	display: -webkit-flex;
	display: flex;
	height: 100px;
	justify-content: center;
	padding-top: 20px;
}

.flex-baobiao-item {
	width: 140px;
	height: 100px;
	margin: 0 20px;
}

.flex-baobiao-item h5 {
	text-align: center;
	font-weight: 700;
	color: #6c757d;
	line-height: 24px;
	font-size: 1.25rem;
}

.flex-baobiao-item p {
	text-align: center;
	font-weight: 500;
	color: #98a6ad;
	line-height: 33px;
	font-size: 14px;
}

/* .Module3 {
		height: 510px;
	} */

.Module3 .Module3-box {
	background: #ffffff;
	border-radius: 5px;
}

.Module3-box-oneBox,
.Module3-box-twoBox,
.Module3-box-threeBox {
	padding: 15px 20px;
}

.Module3-noe-content,
.Module3-two-content,
.Module3-three-content {
	padding-left: 5px;
	height: 410px;
	overflow: hidden;
}

.Module3-noe-content:hover,
.Module3-two-content:hover,
.Module3-three-content:hover {
	overflow: auto;
}

/* element的下拉菜单 */
.el-dropdown-link {
	cursor: pointer;
	color: #409eff;
}
.el-icon-arrow-down {
	font-size: 12px;
}
.shuaxin_span {
	font-size: 16px;
	display: block;
	height: 30px;
	line-height: 30px;
	margin-left: 25px;
	color: #212529;
}
.shuaxin {
	font-size: 22px;
	color: #a8a8a8;
	position: relative;
	top: 2px;
	cursor: pointer;
}
</style>



// WEBPACK FOOTER //
// src/components/DataExpress.vue